@charset "UTF-8";


/*doc
---
title: "<select required> should start with an empty <option>'s [value]"
name: empty-option-on-select
category: Advices
---

## Description
A `<select required>` element, which isn't `[multiple]` and whose `[size]` isn't greater than `1`, should start with an empty `<option>`. That being said, you may use a placeholder content for this option but must ensure to use an empty `[value]` attribute; or set a `[size]` attribute to the `<select>`, which value should equal to the number of `<option>`s.

## References
* <https://html.spec.whatwg.org/multipage/form-elements.html#placeholder-label-option>
* <https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Fjsbin.com%2Ftozopid%2Fquiet>

## Selector
```css
select[required]:not([multiple])[size="1"],
select[required]:not([multiple], [size])
```

## Test
```html
<select name="slices" required>
  <option value="1">Cheese</option>
  <option value="2">Salami</option>
</select><span>†</span>
```
*/
select[required]:not([multiple])[size="1"],
select[required]:not([multiple], [size]) {
  @include advice('select-option-not-empty', $self-closing: true);
}


/*doc
---
title: "Empty [class] attribute"
name: empty-class
category: Advices
---

### Description
`[class]` shouldn't be present if empty. Something to improve, right?

### Selector
```css
[class=""],
[class=" "]
```

### Test
``` html
<b class="">Why is there a class here?</b>
```
*/
[class=""],
[class=" "] {
  @include advice('empty-class');

  @include void-tags {
    @include advice('empty-class', $self-closing: true);
  }
}


/*doc
---
title: "Empty [id] attribute"
name: empty-id
category: Advices
---

### Description
`[id]` shouldn't be present if empty. You'll thank me later.

### Selector
```css
[id=""],
[id=" "]
```

### Test
``` html
<i id="">Wait. Why is my ID empty?</i>
```
*/
[id=""],
[id=" "] {
  @include advice('empty-id');

  @include void-tags {
    @include advice('empty-id', $self-closing: true);
  }
}


/*doc
---
title: "A second visible main tag"
name: main
category: Advices
---

### Description
A single `<main>` should be visible at a time. Isn't that obvious?

### References
* <https://html.spec.whatwg.org/multipage/grouping-content.html#elementdef-main>

### Selector
```css
main ~ main:not([hidden])
```

### Test
``` html
<main>I'm the main content!</main>
<main>No, It's me!</main>
```
*/
main ~ main:not([hidden]) {
  @include advice('main');
}


/*doc
---
title: "A second figcaption tag"
name: figcaption
category: Advices
---

### Description
`<figcaption>` should be single inside its parent. Check the spec!

### References
* <https://html.spec.whatwg.org/multipage/grouping-content.html#the-figure-element>

### Selector
```css
figcaption:not(:first-of-type)
```

### Test
``` html
<figure role="group">
  <figcaption>I'm the caption.</figcaption>
  <img src="/static/ffoodd.png" alt="Needed" width="144" height="144" />
  <figcaption>I'm the caption too.</figcaption>
</figure>
```
*/
figcaption:not(:first-of-type) {
  @include advice('figcaption');
}


/*doc
---
title: "figcaption order"
name: figcaption-order
category: Advices
---

### Description
`<figcaption>` should be first or last child. Nothing else.

### References
* <https://html.spec.whatwg.org/multipage/grouping-content.html#the-figure-element>

### Selector
```css
figcaption:not(:first-child, :last-child)
```

### Test
``` html
<figure role="group">
  <img src="/static/ffoodd.png" alt="Needed" width="144" height="144" />
  <figcaption>I'm the caption.</figcaption>
  <p>I'm something else. Oh, wait.</p>
</figure>
```
*/
figcaption:not(:first-child, :last-child) {
  @include advice('figcaption-order');
}


/*doc
---
title: "An email link should be valid"
name: mailto
category: Advices
---

### Description
A `<href="mailto:">` should contain a valid email.
Otherwise you may annoy your users.

### Selector
```css
[href^="mailto"]
```

### Test
``` html
<a href="mailto:myself">Surpri-ise!</a>
```
*/
[href^="mailto"] {
  @include advice('mailto');
}


/*doc
---
title: "A phone link should call a real number"
name: tel
category: Advices
---

### Description
A `<href="tel:">` should contain a valid phone number.
Otherwise you may make your users to call anubody.

### Selector
```css
[href^="tel"]
```

### Test
``` html
<a href="tel:012345678">Who will I call?</a>
```
*/
[href^="tel"] {
  @include advice('tel');
}


/*doc
---
title: "button [role] on a link"
name: role-button
category: Advices
---

### Description
Obviously, a button role on a link is probably not so hard to move to an authentic button tag, isn't it?

### References
* <https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L174>

### Selector
```css
a[role="button"]
```

### Test
``` html
<a href="/" role="button">Submit</a>
```
*/
a[role="button"] {
  @include advice('role-button');
}


/*doc
---
title: "Link opening new tab"
name: target-blank
category: Advices
---

### Description
A link opening new tab or window should warn user about its behaviour.
You could use a `[title]`, for example.

### References
* <https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#13.2>
* <https://www.w3.org/TR/WCAG21/#link-purpose-in-context>
* <https://www.w3.org/TR/WCAG21/#change-on-request>
* <https://www.w3.org/WAI/WCAG21/Techniques/html/H33>
* <https://www.w3.org/WAI/WCAG21/Techniques/html/H83>
* <https://www.w3.org/WAI/WCAG21/Techniques/failures/F22>

### Selector
```css
[target$="blank"]
```

### Test
``` html
<a href="/" target="_blank" rel="noopener noreferrer">New tab</a>
```
*/
[target$="blank"] {
  @include advice('target-blank');
}


/*doc
---
title: "Linking to a file"
name: file-format
category: Advices
---

### Description
A link to a file should indicate the file format, the file size and if different from the main document, the file language.

### References
* <https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#13.3>
* <https://www.w3.org/TR/WCAG21/#link-purpose-in-context>
* <https://www.w3.org/WAI/WCAG21/Techniques/html/H33>

### Selector
```css
[download],
[href$=".pdf"]:not(link),
[href$=".doc"]:not(link),
[href$=".png"]:not(link),
[href$=".jpg"]:not(link),
[href$=".gif"]:not(link),
[href$=".mp3"]:not(link),
[href$=".mp4"]:not(link),
[href$=".mov"]:not(link),
[href$=".ogg"]:not(link),
[href$=".xls"]:not(link),
[href$=".txt"]:not(link),
[href$=".zip"]:not(link),
[href$=".rar"]:not(link),
[href$=".docx"]:not(link),
[href$=".webp"]:not(link),
[href$=".apng"]:not(link),
[href$=".svg"]:not(link),
[href$=".svgz"]:not(link)
```

### Test
``` html
<a href="/static/ffoodd.png">Wanna file?</a>
```
*/
$href: ('[download]');

@each $format in $formats {
  $href: append($href, unquote('[href$=".#{$format}"]:not(link)'), 'comma');
}

#{$href} {
  @include advice('file-format');
}


/*doc
---
title: "Duplicated roles"
name: duplicate-roles
category: Advices
---

### Description
Some ARIA roles should be unique: at least `[main]`, `[search]`, `[banner]`, `[contentinfo]`.

### References
* <https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#12.6>
* <https://www.w3.org/TR/WCAG21/#bypass-blocks>

### Selector
```css
[role="main"] ~ [role="main"],
[role="search"] ~ [role="search"],
[role="banner"] ~ [role="banner"],
[role="contentinfo"] ~ [role="contentinfo"]
```

### Test
``` html
<main role="main"><br /></main>
<div role="main"><br /></div>
```
*/
[role="main"] ~ [role="main"],
[role="search"] ~ [role="search"],
[role="banner"] ~ [role="banner"],
[role="contentinfo"] ~ [role="contentinfo"] {
  @include advice('duplicate-roles');
}


/*doc
---
title: "May have a search [role]?"
name: missing-role
category: Advices
---

### Description
A `[class]` or `[id]` containing search may carry the search ARIA `[role]`.

### References
* <https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#12.6>
* <https://www.w3.org/TR/WCAG21/#bypass-blocks>

### Selector
```css
[id*="search"]:not([role="search"]),
[class*="search"]:not([role="search"])
```

### Test
``` html
<form class="search" action="">
  <label for="field">Search</label>
  <input type="search" id="field" /><span>†</span>
</form>
```
*/
[id*="search"]:not([role="search"]),
[class*="search"]:not([role="search"]) {
  @include advice('missing-role');
}

input[id*="search"]:not([role="search"]),
input[class*="search"]:not([role="search"]) {
  @include advice('missing-role', $self-closing: true);
}

[role="search"] [id*="search"]:not([role="search"]),
[role="search"] [class*="search"]:not([role="search"]) {
  @extend %a11y-reset;
}


/*doc
---
title: "Does this look like [required]?"
name: required
category: Advices
---

### Description
A `[required]` or `[aria-required]` should be visually understandable.

### References
* <https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.10>
* <https://www.w3.org/TR/WCAG21/#labels-or-instructions>

### Selector
```css
[required],
[aria-required]
```

### Test
``` html
<form action="">
  <label for="field">Fied</label>
  <textarea id="field" required></textarea><span>†</span>
</form>
```
*/
[required],
[aria-required] {
  @include advice('required', $self-closing: true);
}

input[required],
input[aria-required],
select[required],
select[aria-required],
textarea[required],
textarea[aria-required] {
  @include advice('required', $self-closing: true);
}


/*doc
---
title: "Not :empty [hidden] things"
name: hidden
category: Advices
---

### Description
A `[hidden]` or `[aria-hidden]` may not be a good idea if hiding content.

### References
* <https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.8>
* <https://www.w3.org/TR/WCAG21/#name-role-value>

### Selector
```css
[hidden]:not(:empty),
[aria-hidden="true"]:not(:empty)
```

### Test
``` html
<a href="/" aria-hidden="true">Important thing!</a>
```
*/
[hidden]:not(:empty),
[aria-hidden="true"]:not(:empty) {
  @include advice('hidden');

  @include void-tags {
    @include advice('hidden', $self-closing: true);
  }
}


/*doc
---
title: "Placeholder can't replace a label"
name: placeholder
category: Advices
---

### Description
A `[placeholder]` is not a label, is it?

### Selector
```css
[placeholder]:not([title], [aria-label], [aria-labelledby])
```

### Test
``` html
<input type="text" placeholder="Look Ma, no label!" id="test"><span>†</span>
```
*/
[placeholder]:not([title], [aria-label], [aria-labelledby]) {
  @include advice('placeholder', $self-closing: true);
}

label [placeholder]:not([title], [aria-label], [aria-labelledby]) {
  @extend %a11y-reset;
}


/*doc
---
title: "video or audio things"
name: video-audio
category: Advices
---

### Description
A `<video>` or `<audio>` needs a few things to be accessible, like a transcript, subtitles, controls. This kind of things.

### References
* <https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#4.1>
* <https://www.w3.org/TR/WCAG21/#audio-only-and-video-only-prerecorded>
* <https://www.w3.org/TR/WCAG21/#audio-description-or-media-alternative-prerecorded>
* <https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#4.13>
* <https://www.w3.org/TR/WCAG21/#media-alternative-prerecorded>

### Selector
```css
video,
audio
```

### Test
``` html
<video src="/" controls></video><span>†</span>
```
*/
video,
audio {
  @include advice('video-audio', $self-closing: true);
}


/*doc
---
title: "[title] should be equal to alternative"
name: title
category: Advices
---

### Description
A `[title]` on any graphic content should be equal to `[aria-label]` or `[alt]`.

### References
* <https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.3>
* <https://www.w3.org/TR/WCAG21/#non-text-content>
* <https://www.w3.org/WAI/tutorials/images/decision-tree/>
* <https://html.spec.whatwg.org/multipage/images.html#alt>

### Selector
```css
img[alt][title],
area[alt][title],
svg[aria-label][title]
```

### Test
``` html
<img src="/static/ffoodd.png" alt="I'm an alternative text!" title="I'm a title!" height="144" width="144"><span>†</span>
```
*/
img[alt][title],
area[alt][title],
svg[aria-label][title] {
  @include advice('title', $self-closing: true);
}


/*doc
---
title: "Date and time should be understandable"
name: time
category: Advices
---

### Description
A `<time>` or `[datetime]` content should be an understandable and well formated date.

### Selector
```css
time,
[datetime]
```

### Test
``` html
<time>Yesterday</time>
```
*/
time,
[datetime] {
  @include advice('time');
}


/*doc
---
title: "[scope] should be either col or row"
name: th-scope
category: Advices
---

### Description
A `[scope]` can be col or row (and nothing else) and it has to be relevant.

### References
* <https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#5.7>
* <https://www.w3.org/TR/WCAG21/#info-and-relationships>
* <https://www.w3.org/WAI/WCAG21/Techniques/html/H63>

### Selector
```css
th[scope]
```

### Test
``` html
<table>
  <caption>I'm a caption</caption>
  <thead>
    <tr>
      <th scope="col">First column</th>
      <td>Second column</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First cell</td>
      <td>Second cell</td>
    </tr>
    <tr>
      <td>First cell</td>
      <td>Second cell</td>
    </tr>
  </tbody>
</table>
```
*/
th[scope] {
  @include advice('th-scope');
}


/*doc
---
title: "Layout table in use"
name: table-presentation
category: Advices
---

### Description
A `[role="presentation"]` is a good idea for any `<table>` used for layout, but a bad thing for a data table. Double check this!

### References
* <https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#5.3>
* <https://www.w3.org/TR/WCAG21/#meaningful-sequence>

### Selector
```css
table[role="presentation"]
```

### Test
``` html
<table role="presentation">
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>
```
*/
table[role="presentation"] {
  @include advice('table-presentation');
}


/*doc
---
title: "No [href]"
name: no-href
category: Advices
---

### Description
Yet it's valid to skip the `[href]` attribute on a link, it's probably better to double check, isn't it?

### References
* <https://html.spec.whatwg.org/multipage/links.html#links-created-by-a-and-area-elements>
* <https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L161>
* <https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L165>

### Selector
```css
a:not([href])
```

### Test
``` html
<a>Who am I? Where do I link?</a>
```
*/
a:not([href]) {
  @include advice('no-href');
}


/*doc
---
title: "Non HTTPS URL"
name: no-https
category: Advices
---

### Description
When possible, try to use HTTPS.

### References
* <https://transparencyreport.google.com/https/overview?hl=en>
* <https://letsencrypt.org/>
* <https://checklists.opquast.com/fr/assurance-qualite-web/les-echanges-de-donnees-sensibles-sont-securises-et-signales-comme-tels>

### Selector
```css
[src^="http:"],
[href^="http:"]
```

### Test
``` html
<a href="http://www.ffoodd.fr/">My target's protocol isn't secured</a>
```
*/
[src^="http:"],
[href^="http:"] {
  @include advice('no-https');
}
